<template>
	<div class="wrap">
		<div class="essential-box">
			<div class="pay-title">打卡设置</div>
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="grid-content height-auto jurisdiction-set">
						<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>权限设置：</div>
						<div class="val">
							<div class="label" v-for="(item, index) in signList" :key="index">
								<el-checkbox v-model="item.checked" :disabled="item.disabled">
									<span>{{ item.name }}</span>
									<span class="gray" v-if="item.default">（已默认）</span>
								</el-checkbox>
								<span class="cursor-pointer" v-if="!item.default && signInSaveShow" @click="setDefault(index)"
									>设置默认</span
								>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content" v-if="!signInSaveShow && jurisdiction.shopConfig == 1">
						<el-link type="primary" @click="signInEdit">编辑</el-link>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>是否支持外勤：</div>
						<div class="val">
							<el-radio-group v-model="is_outside">
								<el-radio :label="1" :disabled="outsideDisabled">是</el-radio>
								<el-radio :label="2" :disabled="outsideDisabled">否</el-radio>
							</el-radio-group>
						</div>
					</div>
				</el-col>
				<el-col :span="24" v-if="signInSaveShow">
					<div class="edit-btn">
						<el-button round @click="signInEditBack()">返回</el-button>
						<el-button type="primary" round @click="setSignInSave('save')">保存</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
// 用工设置组件
import { setShopConfigSave } from '@/api/shop.js'
import { cloneDeep } from 'lodash'
export default {
	name: 'useSignSetting',
	props: {
		shop_sn: {
			type: String,
			required: true
		},
		shop_info: {
			type: Object,
			required: true
		},
		jurisdiction: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			shopInfo: {},
			signInSaveShow: false,
			signList: [
				{
					name: '扫码',
					value: 1,
					checked: true,
					disabled: true,
					default: true
				},
				{
					name: '定位+拍照',
					value: 2,
					checked: false,
					disabled: false,
					default: false
				}
			],
			is_outside: 2,
			outsideDisabled: true
		}
	},
	async mounted() {
		this.setValue()
		this.signInEditDisabled()
	},
	watch: {
		shop_info() {
			this.setValue()
		}
	},
	methods: {
		setValue() {
			this.shopInfo = this.shop_info
			let config = this.shopInfo.config
			this.signList.forEach(item => {
				item.default = false
				if (item.value == config.clock_in.default) item.default = true
				config.clock_in.way.forEach(it => {
					if (it == item.value) item.checked = true
				})
			})
			this.is_outside = config.is_outside
		},
		//设置默认 签到、签退方式
		setDefault(index) {
			for (let i = 0; i < this.signList.length; i++) {
				this.signList[i].default = false
				if (i == index) {
					this.signList[index].checked = true
					this.signList[i].default = true
				}
			}
			this.setSignInSave('setDefault')
		},
		// 签到方式保存
		async setSignInSave(type) {
			try {
				let way = []
				let signDefault = 1
				for (let i = 0; i < this.signList.length; i++) {
					if (this.signList[i].checked) {
						way.push(this.signList[i].value)
					}
					if (this.signList[i].default && this.signList[i].checked) {
						signDefault = this.signList[i].value
					}
				}
				let res = await setShopConfigSave({
					id: this.$route.query.shop_id,
					way: way.join(),
					default: +signDefault,
					is_outside: +this.is_outside
				})
				this.$message.success('保存成功')

				// save 点击保存 关闭弹框 执行全部禁用
				if (type == 'save') {
					this.signInSaveShow = false
					this.outsideDisabled = true
					this.signInEditDisabled()
				}
				// 打卡设置保存 不需要拷贝信息返回回显
				else if (type == 'setDefault') {
					this.signListBak = this.signList
				}
				this.$emit('regainClick', '获取详情')
			} catch (err) {
				console.log(err)
			}
		},
		signInEdit() {
			this.signInSaveShow = true
			this.outsideDisabled = false

			// 定位加拍照checked 打开禁用
			this.signList[1].disabled = false

			// 深拷贝
			this.signListBak = cloneDeep(this.signList)
			this.is_outsideBak = cloneDeep(this.is_outside)
		},

		signInEditBack() {
			this.signInSaveShow = false
			this.outsideDisabled = true

			this.signList = this.signListBak
			this.is_outside = cloneDeep(this.is_outsideBak)
			this.signInEditDisabled()
			this.$forceUpdate()
		},
		// 权限都禁用
		signInEditDisabled() {
			this.signList.forEach(it => {
				it.disabled = true
			})
		}
	}
}
</script>

<style scoped lang="scss">
.essential-box {
	margin-bottom: 30px;
}
.essential-box .grid-content {
	display: flex;
	height: auto;
	padding: 10px 0;
	height: 30px;
	line-height: 30px;
}
.essential-box .grid-content .key {
	width: 110px;
	font-size: 13px;
	color: #999999;
	text-align: right;
}
.essential-box .grid-content .val {
	font-size: 14px;
	padding-left: 20px;
	color: #222222;
}
.height-auto {
	height: auto !important;
}
.height-auto .val {
	display: flex;
}
.edit-btn {
	text-align: center;
	margin-top: 20px;
}

.pay-title {
	color: #222222;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}
.el-row {
	padding-bottom: 50px;
}
.jurisdiction-set .val {
	display: block;
}
.jurisdiction-set .el-checkbox {
	width: 240px !important;
}
.gray {
	color: #999999;
	font-size: 14px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/UseWorkSetting.vue